import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { PullRefresh, Toast } from 'react-vant'
import './shou.scss'

export default function Xsp() {
  let [list, setlist] = useState([
    'https://alimov2.a.kwimgs.com/upic/2023/10/31/20/BMjAyMzEwMzEyMDE1MThfMTg0NzMyNzQ2Ml8xMTYxODEwNjExNzRfMV8z_b_B4c65ade70fb54f5cb8c426eb38cf68a1.mp4',
    'https://alimov2.a.kwimgs.com/upic/2023/01/03/20/BMjAyMzAxMDMyMDUyNTFfNzI0ODAwOTIyXzkyNjg3ODE4NjUwXzFfMw==_b_B6b59de9508a196b586651452365f022f.mp4',
    'https://alimov2.a.kwimgs.com/upic/2024/01/17/19/BMjAyNDAxMTcxOTU2MjVfNzMzNDQwNTRfMTIyMzQ3Nzc3MTQ2XzJfMw==_b_B14593ef285d8f878a5fcf2ebe14080b9.mp4',
    'https://txmov2.a.kwimgs.com/upic/2023/06/01/17/BMjAyMzA2MDExNzA5NTdfMTgzMzExODMwNF8xMDQ0ODU1NDY2MTFfMV8z_b_Be3267f8ef3129646738487659e291aaf.mp4',
    'https://txmov2.a.kwimgs.com/upic/2023/05/27/18/BMjAyMzA1MjcxODQzMTFfMjQ2MDAzODY1XzEwNDA5NTU3MjU4M18xXzM=_b_B49ad591988d39f39bfbdd1b44282ad46.mp4',
    'https://txmov2.a.kwimgs.com/upic/2023/03/26/18/BMjAyMzAzMjYxODI0NDBfMjAzNjQ2MjA0OV85OTA4NTUyNTkzMl8xXzM=_b_B3264c3b12460ffef89a3559c106680ac.mp4',
  ])
  let navigate = useNavigate()
  const onRefresh = showToast => {
    return new Promise(resolve => {
      setTimeout(() => {
        if (showToast) {
          Toast.info("刷新成功");
        }
        resolve(true)
      }, 1000)
    })
  }
  let goVideo = (item) => {
    navigate('/videoplayer', { state: item })
  }
  return (
    <div className='demo-pull-refresh'>
      <PullRefresh successText="刷新成功" onRefresh={onRefresh} style={{ overflow: 'auto' }}>
        <div className='xst'>
          <img src="https://www.pabzibo.live:3001/upload/1x.png" className='xstp' />
          <img src="https://www.pabzibo.live:3001/upload/2x.png" className='xstp' />
          <img src="https://www.pabzibo.live:3001/upload/3x.png" className='xstp' />
          <img src="https://www.pabzibo.live:3001/upload/4x.png" className='xstp' />
        </div>
        <div className='ptu'>
          {
            list.map((el, index) => {
              return (
                <div key={index} className='xsge' onClick={() => goVideo(el)}>
                  <video src={el} alt="" width='150%' style={{ borderRadius:'15px' }} className='xspp' />
                </div>

              )
            })
          }
        </div>
      </PullRefresh>
    </div>
  )
}
